<script setup>
import { onMounted, ref, computed, reactive } from "vue";
import SvgIcon from "../../svgIcon/index.vue";
import fun from "@/unit/function/index.js";

// 提示数量
const noticeCount = ref(2);

// 演示数据
const noticeList = ref([
  {
    title: "11测试标题测试标题测试标题测试标题测试标题",
    create_time: "2021-12-08 11:59:59",
  },
  {
    title: "2测试标题测试标题测试标题测试标题测试标题",
    create_time: "2021-12-06 11:59:59",
  },
]);

onMounted(() => {});
</script>

<template>
  <a-popover
    :title="$t('notice.title')"
    placement="bottomRight"
    trigger="click"
    arrow-point-at-center
    top="40"
  >
    <template #content>
      <div v-for="notice in noticeList" class="notice">
        <a-typography-text
          class="typography"
          :ellipsis="true"
          :content="notice.title"
        />
        <span class="time">
          {{ fun.timeFrom(notice.create_time) }}
        </span>
      </div>
      <div class="button-box">
        <a-button size="small" type="link">
          {{ $t("notice.title") }}
        </a-button>
        <a-divider type="vertical" />
        <a-button size="small" type="link">
          {{ $t("notice.readed") }}
        </a-button>
      </div>
    </template>

    <div class="action">
      <a-badge :count="noticeCount">
        <SvgIcon name="BellOutlined" :style="{ fontSize: '16px' }" />
      </a-badge>
    </div>
  </a-popover>
</template>

<style lang='less' scoped>
.notice {
  line-height: 32px;
}
.typography {
  cursor: pointer;
  width: 160px;
}
.typography:hover {
  color: @primary-color;
}
.time {
  margin-left: 20px;
  color: @text-color-secondary;
}
.button-box {
  margin-top: 10px;
  padding-top: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: @border-width-base dashed @border-color-split;
}
</style>